<template>
  <div>
    <div class="title">-周末去哪儿玩-</div>
      <ul>
        <li
          class="item border-bottom"
          v-for="item of List"
          :key="item.id"
        >   <div class =item-img-wrapper>
              <img class="item-img" :src="item.imgUrl" />
            </div>
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
          </div>
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  data () {
      return{
      List:[{
          id:"0001",
          imgUrl:"http://img1.qunarzz.com/sight/source/1606/85/c6b6bad1b977e.jpg_r_640x214_5c638941.jpg",
          title:"漂流勇进，烧烤露营",
          desc:"轻松水上漂，任我乐逍遥"
      },{
          id:"0002",
          imgUrl:"http://img1.qunarzz.com/sight/source/1505/53/02091f1ee43d0a.jpg_r_640x214_2e3256b1.jpg",
          title:"北京清凉避暑胜地",
          desc:"到大自然中享受“天然空调”的清凉"
      },{
          id:"0003",
          imgUrl:"http://img1.qunarzz.com/sight/source/1505/ce/bc89bc2f0e33ea.jpg_r_640x214_3e408453.jpg",
          title:"学生最爱的博物馆",
          desc:"周末干嘛？北京很多博物馆已经免费开放啦"
      }]
      }
  },
}

</script>
<style lang="stylus" scoped>
  .title
    line-height: 30px
    background: #eee
    text-indent: .2rem
    font-size :.30rem
    text-align:center
  .item-img-wrapper
    overflow: hidden
    margin-left:.1rem
    margin-right:.1rem
    height: 0
    padding-bottom: 40%
    .item-img
      width: 100%
      background-repeat: repeat-x
  .item-info
    padding: .1rem
    .item-title
      line-height: .36rem
      font-size: .30rem
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
    .item-desc
      line-height: .4rem
      font-size: .24rem
      color: #ccc
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis

</style>
